<template>
  <div class="container">
    <div id="exhart6" style="width: 100%; height: 100%"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { getCityData, getYSYXFXYJByMarketATy } from "../../util/home";
export default {
  name: "",
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      option: {},
    };
  },
  inject: ["currentMarketId"],
  computed: {},
  watch: {},
  mounted() {
    // this.getInit();
  },
  methods: {
    getInit() {
      getYSYXFXYJByMarketATy({ marketId: this.currentMarketId() }).then(
        (res) => {
          var myChart = echarts.init(document.getElementById("exhart6"), null, {
            devicePixelRatio: 2.5,
          });
          myChart.clear();
          let datas = res.data.data;
          this.option = {
            // backgroundColor: "#010A31",
            title: {
              text: "批次",
              top: "-1%",
              textStyle: {
                color: "#fff",
                fontSize: 12,
                //  type: 'dashed',
              },
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              },
            },
            grid: {
              top: "10%",
              right: "3%",
              left: "5%",
              bottom: "12%",
              height: "80%",
            },
            xAxis: [
              {
                type: "category",
                data: datas.map((e) => e.name),
                axisLine: {
                  lineStyle: {
                    color: "#3A67A1",
                    //  type: 'dashed',
                  },
                },
                axisLabel: {
                  show: true,
                  color: "#fff",
                  interval: 0,
                  fontSize: 12,
                  // formatter: function (val) {
                  //   var strs = val.split(""); //字符串数组
                  //   var str = "";
                  //   for (var i = 0, s; (s = strs[i++]); ) {
                  //     //遍历字符串数组
                  //     str += s;
                  //     if (!(i % 4)) str += "\n"; //按需要求余
                  //   }
                  //   return str;
                  // },
                },
                axisTick: {
                  show: false,
                },
              },
            ],
            yAxis: [
              {
                type: "value",
                // name: "单位：人",
                nameTextStyle: {
                  color: "#fff",
                  fontSize: 16,
                },
                axisLabel: {
                  formatter: "{value}",
                  color: "#fff",
                },
                axisTick: {
                  show: false,
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    // type: 'dashed',
                    width: 1,
                    color: "#203C6D",
                  },
                },
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: "#3A67A1", // "rgba(0,186,255,.6)"
                  },
                },
              },
            ],
            series: [
              {
                type: "bar",
                data: datas.map((e) => e.jcsum),
                barWidth: "18px",
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: "#DE7A36", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#96FCFD", // 100% 处的颜色
                        },
                      ],
                      false
                    ),
                    // shadowColor:  "rgba(0,160,221,1)",
                    // shadowBlur: 4
                  },
                },
                label: {
                  normal: {
                    color: "#fff",
                    show: true,
                    formatter: "{c}",
                    position: "top",
                  },
                },
              },
            ],
            dataZoom: [
              //滑动条
              {
                xAxisIndex: 0, //这里是从X轴的0刻度开始
                show: false, //是否显示滑动条，不影响使用
                type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                startValue: 0, // 从头开始。
                endValue: 10, // 一次性展示6个。
              },
            ],
          };
          myChart.setOption(this.option);
          setInterval(() => {
            // 每次向后滚动一个，最后一个从头开始。
            if (this.option.dataZoom[0].endValue == datas.length) {
              this.option.dataZoom[0].endValue = 10;
              this.option.dataZoom[0].startValue = 0;
            } else {
              this.option.dataZoom[0].endValue =
                this.option.dataZoom[0].endValue + 1;
              this.option.dataZoom[0].startValue =
                this.option.dataZoom[0].startValue + 1;
            }
            myChart.setOption(this.option);
          }, 2000);
          window.addEventListener("resize", function () {
            myChart.resize();
          });
        }
      );
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  height: 100%;
  display: flex;
}
</style>
